<template>
    <div>
        <div class="bgColor">
            <h1 class="container-xl main-shopcart">购物车</h1>
        </div>
        <div class="container-xl shopcar-container">
        <div class="main">
            <div class="nav">
                <span class="left">全部课程</span>
                <span class="right">
                    <a href="/order/index">查看订单</a>
                </span>
            </div>
            <ul class="head">
                <li class="item check">
                    <div class="icheckbox_flat-blue" style="position: relative;"><input type="checkbox" class="flat-blue list-child" id="all" rtype="checkall" style="position: absolute; opacity: 0;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div>
                    <input type="checkbox" class="form-check-label" :checked="Select" for="all" @click="SelectAll()">全选
                </li>
                <li class="item classInfo">课程信息</li>
                <li class="item price">定价（元）</li>
                <li class="item count">数量</li>
                <li class="item total">小计（元）</li>
                <li class="item operation">操作</li>
            </ul>
            <div class="shopcar-main">
                <form>
                    <ul class="haveorder" v-for="(item,index) in $store.state.shopping" :key="index">
                        <li class="order-item car-check">
                            <div class="icheckbox_flat-blue" style="position: relative;">
                                <input type="checkbox" class="flat-blue list-child" :checked="item.size" @click="SelectAlltow(item.size,index)">
                            </div>
                        </li>
                        <li class="order-item info">
                            <div class="courseimg">
                                <a href="javascript:;" title="vuex精讲">
                                    <img :src="item.image" alt="vuex精讲" title="vuex精讲">
                                </a>
                            </div>
                            <div class="course-name">
                                <a href="javascript:;" title="vuex精讲">{{item.name}}</a>
                                <div class="name-level">课程难度：
                                    <span>高级</span>
                                </div>
                                <div class="name-desc">
                                    Vuex在vue中的使用，听完本门课程，你将会使用Vuex
                                </div>
                            </div>
                        </li>
                        <li class="order-item shopcar-price">
                            <div class="no-line-price">￥{{item.age}}</div>
                        </li>
                        <li class="order-item num">1</li>
                        <li class="order-item deletes">
                            <span class="deletd-text" @click="ShoppingCartData(item.id,index)">删除</span>
                        </li>
                    </ul>
                    <ul class="foot">
                        <li class="foot-item">合计<span id="selected-price" class="unique">{{$store.state.nub}}</span></li>
                        <li>
                            <button type="submit" class="btn btn-danger" @click="qwe()">去结算</button>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
import { reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
export default {
    name:"HelloShopping",
    setup(){
        //首先在setup中定义
        const router = useRouter()

        const store = useStore()

        // 定义一个全选数据
        let Select = reactive(false);
        
        // 全选
        var SelectAll = () => {
            Select = !Select
            store.commit('SelectAllCheck',Select)
        }

        // 反选
        var SelectAlltow = (i,x) => {
            console.log(i)
            store.commit('SelectAlltowc',x)
            store.commit('SelectAlltow',!i)
        }

        // 删除
        var ShoppingCartData = (id,i) => {
            store.commit('SelectAlltowc',i)
            store.commit('DeleteShoppingCart',id)
        }

        var qwe = () => {
            if(store.state.nub == 0){
                 ElMessage({
                    showClose: true,
                    message: '请选择购物物品',
                    type: 'error',
                })
            }else{
                store.commit('delete')
                ElMessage({
                    showClose: true,
                    message: '购买成功',
                    type: 'success',
                })
            }
        }
        return{
            store,
            Select,
            router,
            SelectAll,
            ShoppingCartData,
            SelectAlltow,
            qwe
        }
    }
}
</script>

<style scoped>
.bgColor {
    width: 100%;
    height: 200px;
    background-color: red;
    background: linear-gradient(
-45deg
, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
.main-shopcart {
    margin: 0 auto;
    height: 100px;
    width: 1140px;
    font-size: 24px;
    font-weight: bold;
    line-height: 100px;
    color: #FFFFFF;
    opacity: 1;
}
.container-xl {
    padding: 0 0;
}
.shopcar-container {
    width: 1140px;
    margin: -100px auto 50px auto;
    background: #e3F5F6;
    border-radius: 8px;
    box-shadow: 0px 0px 5px #888888;
}
.container-xl {
    padding: 0 0;
}
.shopcar-container .main {
    padding: 15px;
    border-radius: 5px;
}
.nav {
    height: 40px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #E6E6E6;
}
.nav .left {
    width: 80px;
    font-size: 18px;
    font-weight: bold;
    line-height: 38px;
    color: #FF4400;
    border-bottom: 2px solid #FF4400;
}
*, *::before, *::after {
    box-sizing: border-box;
}
.nav .right {
    height: 24px;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    color: #333333;
}
a {
    color: #333333;
    text-decoration: none;
}
.head {
    padding: 0 10px;
    margin: 15px 0;
    width: 1110px;
    height: 40px;
    display: flex;    
    justify-content: space-between;
    line-height: 40px;
    background: #FCFCFC;
    box-sizing: border-box;
    border-radius: 8px;
}
ul, li {
    list-style: none;
}
.head .check {
    width: 70px;
}
.head .item {
    float: left;
    font-size: 14px;
    color: #333333;
    text-align: center;
}
ul, li {
    list-style: none;
}
.head .item {
    float: left;
    font-size: 14px;
    color: #333333;
    text-align: center;
}
.haveorder {
    width: 1110px;
    background: #FCFCFC;
    margin-bottom: 15px;
    border-radius: 5px;
    display: flex;
    padding: 10px;
}
ul, li {
    list-style: none;
}
.haveorder .car-check {
    width: 35px;
    height: 120px;
    line-height: 120px;
}
.courseimg {
    float: left;
    width: 200px;
    height: 120px;
}
a {
    color: #333333;
    text-decoration: none;
}
.courseimg img {
    width: 100%;
    height: 100%;
}
.haveorder .info .course-name {
    width: 295px;
    padding: 0 10px 0 10px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.haveorder .info .course-name a {
    font-size: 18px;
    font-weight: bold;
}
.haveorder .info .course-name .name-level {
    margin-top: 10px;
}
.haveorder .info .course-name .name-desc {
    margin-top: 10px;
    color: #999;
    height: 52px;
    line-height: 26px;
    overflow: hidden;
}
.haveorder .shopcar-price {
    width: 140px;
    height: 120px;
    text-align: center;
    padding: 40px 0 0 0;
}
.line-price {
    color: #999;
}
.haveorder .num {
    width: 140px;
    height: 120px;
    text-align: center;
    line-height: 120px;
}
.haveorder .totoalprice {
    width: 140px;
    height: 120px;
    text-align: center;
    line-height: 120px;
    color: #c82333;
    font-weight: bold;
}
.haveorder .deletes {
    width: 140px;
    height: 120px;
    padding: 40px 0 0 40px;
}
a {
    color: #333333;
    text-decoration: none;
}
.foot {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #333333;
    margin-bottom: 10px;
}
ul, li {
    list-style: none;
}
.foot-item {
    height: 40px;
    margin-right: 30px;
    line-height: 40px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
}
.unique {
    margin-left: 5px;
    font-size: 24px;
    color: #c82333;
    font-weight: bold;
}
.btn-danger {
    color: #fff;
    width: 100px;
    height: 38px;
    border-radius: 20px;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}
</style>